<template>
	<div class="loginDiv fillcontain">
		<transition name="form-fade" mode="in-out">
			<section class="form_contianer" v-show="showLogin">
				<div class="manage_tip">
					<h3>艾美运维系统</h3>
				</div>
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="ruleForm loginForm">
					<el-form-item prop="username">
						<el-input type="text" v-model="ruleForm.username" placeholder="请输入账号"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" @keyup.enter.native="submitForm('ruleForm')"
						 show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" class="submit_btn">登陆</el-button>
					</el-form-item>
				</el-form>
			</section>
		</transition>
	</div>
</template>


<script>
	import {
		login
	} from '@/api/user'
	import {
		Message,
		MessageBox
	} from 'element-ui'
	export default {
		data() {
			return {
				checked: true,
				showLogin: false,
				ruleForm: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 20,
							message: '长度在 3 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ]
				}
			};
		},
		mounted() {
			this.showLogin = true;
			// 			if (!this.adminInfo.id) {
			//     			this.getAdminData()
			//     		}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						login(this.ruleForm.username, this.ruleForm.password)
							.then((response) => {
								if(response.code=="200"){
									
									this.$router.push({
										name: "Dashboard"
									})
								}else{
									Message({
										message: response.message,
										type: 'error',
										duration: 2 * 1000
									})
								}
								
							})
							.catch((error) => {
								console.log(error)
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			buy() {
				getbuy()
					.then((response) => {
						console.log(response)
					})
			}
		}
	}
</script>

<style lang="less">
	@import '../style/mixin';

	.loginDiv {
		background-color: #324057;
	}

	.form_contianer {
		.wh(320px, 240px);
		.ctp(320px, 500px);
		padding: 25px;
		border-radius: 5px;
		text-align: center;
		background-color: #fff;

		.submit_btn {
			width: 100%;
			font-size: 16px;
		}
	}

	.remember {
		margin: 0px 0px 5px 0px;
		float: left;
	}

	.form-fade-enter-active,
	.form-fade-leave-active {
		transition: all 1s;
	}

	.form-fade-enter,
	.form-fade-leave-active {
		transform: translate3d(0, -50px, 0);
		opacity: 0;
	}

	.manage_tip {
		position: absolute;
		width: 100%;
		top: -100px;
		left: 0;
		h3 {
			font-size: 34px;
			color: #fff;
		}
	}
</style>
